<template>
  <custom-modal-page :visible.sync="visible">
    <div class="detail-material-in-bound-page">
      <div
        class="zhgd-data-report-header"
        :header="type == '1' ? '详情' : '编辑'"
      >
        <a-button type="primary" ghost class="back-button" @click="goBack">
          返回
        </a-button>
      </div>
      <div class="detail-material-in-bound-container">
        <a-collapse v-model="activeKey">
          <a-collapse-panel key="1" :show-arrow="false">
            <!-- 自定义头部左边 -->
            <template slot="header">
              <div @click.stop class="customize-text" header="物料信息"></div>
            </template>
            <!-- 自定义头部右边边 -->
            <template slot="extra">
              <div class="customize-extra">
                {{ activeKey.includes("1") ? "收起" : "展开" }}
                <div
                  class="icon"
                  :class="[activeKey.includes('1') && 'active']"
                >
                  <bj-icon-font type="xl" color="#0068B7" :size="10">
                  </bj-icon-font>
                </div>
              </div>
            </template>
            <div class="material-content">
              <a-row :gutter="20">
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">标段：</div>
                    <div class="value">{{ form.orgName }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">领用时间：</div>
                    <div class="value">{{ form.outbaseTime }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">单据号：</div>
                    <div class="value">{{ form.code }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">物料名称：</div>
                    <div class="value">{{ form.name }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">物料规格：</div>
                    <div class="value">{{ form.norms }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">型号：</div>
                    <div class="value">{{ form.model }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">材质：</div>
                    <div class="value">{{ form.material }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">计量单位：</div>
                    <div class="value">{{ form.unit }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">领用数量：</div>
                    <div class="value">{{ form.num }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
                  <div class="form-item">
                    <div class="label">供应商：</div>
                    <div class="value">{{ form.supplier }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">物料类型：</div>
                    <div class="value">{{ form.materialType }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="6">
                  <div class="form-item">
                    <div class="label">物料大类：</div>
                    <div class="value">{{ form.type }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <!-- <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
                  <div class="form-item">
                    <div class="label">含税金额：</div>
                    <div class="value">{{ form.amountInclusiveTax }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="12">
                  <div class="form-item">
                    <div class="label">除税金额：</div>
                    <div class="value">{{ form.amountExcludingTax }}</div>
                    <div class="unit"></div>
                  </div>
                </a-col> -->
              </a-row>
            </div>
          </a-collapse-panel>
          <a-collapse-panel key="2" :show-arrow="false">
            <!-- 自定义头部左边 -->
            <template slot="header">
              <div @click.stop class="customize-text" header="领用信息"></div>
            </template>
            <!-- 自定义头部右边边 -->
            <template slot="extra">
              <div class="customize-extra">
                {{ activeKey.includes("2") ? "收起" : "展开" }}
                <div
                  class="icon"
                  :class="[activeKey.includes('2') && 'active']"
                >
                  <bj-icon-font type="xl" color="#0068B7" :size="10">
                  </bj-icon-font>
                </div>
              </div>
            </template>
            <div class="material-content">
              <a-row :gutter="20">
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8" :xxl="6">
                  <div class="form-item">
                    <div class="label">领用人：</div>
                    <div class="value" v-if="type == 1">
                      {{ form.outbaseUser }}
                    </div>
                    <a-input
                      class="input-value"
                      v-else-if="type == 2"
                      v-model="outbaseUser"
                    />
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="16" :xxl="18">
                  <div class="form-item">
                    <div class="label">领用客户：</div>
                    <div class="value" v-if="type == 1">
                      {{ form.outbaseCustomer }}
                    </div>
                    <a-input
                      class="input-value"
                      v-else-if="type == 2"
                      v-model="outbaseCustomer"
                    />
                  </div>
                </a-col>
                <a-col :xs="24" :sm="24" :md="24">
                  <div class="form-item">
                    <div class="label">备注：</div>
                    <div class="value">{{ form.remark }}</div>
                  </div>
                </a-col>
                <!-- <a-col :xs="24" :sm="24" :md="24">
                  <div class="form-item form-file form-pic">
                    <div class="label">上传图片：</div>
                    <bj-upload-img
                      viewMode
                      replaceField="imagePath"
                      v-model="form.picFiles"
                    ></bj-upload-img>
                  </div>
                </a-col> -->
                <!-- <a-col :xs="24" :sm="24" :md="24">
                  <div class="form-item form-file">
                    <div class="label">上传附件：</div>
                    <bj-upload-file
                      v-model="form.enclosureFiles"
                      :viewMode="true"
                      :count="20"
                      @download="downLoadFile($event)"
                      @preview="viewFile($event)"
                      :replaceFields="{
                        fileName: 'realFileName',
                        fileSize: 'fileSize',
                        fileType: 'fileType',
                        fileUrl: 'fileUrl',
                      }"
                    ></bj-upload-file>
                  </div>
                </a-col> -->
              </a-row>
            </div>
          </a-collapse-panel>
        </a-collapse>
        <div class="edit-footer" v-if="type == 2">
          <a-button type="default" @click="goBack()">取消</a-button>
          <a-button type="primary" @click="save()"> 确定 </a-button>
        </div>
      </div>
    </div>
  </custom-modal-page>
</template>
<script>
import {
  getMaterialOutDetail,
  editMaterialOut,
} from "@/api/wisdom-beam/material-app";
import { notificationTip, commonViewFile } from "@/utils";
import bjUploadImg from "@/components/bj-upload-img";
import bjUploadFile from "@/components/bj-upload-file";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [String, Number],
      default: "",
    },
    type: {
      type: [String, Number],
      default: "",
    },
  },
  components: {
    bjUploadImg,
    bjUploadFile,
  },
  data() {
    return {
      activeKey: ["1", "2"],
      form: {},
      fileList: [],
      outbaseUser: "",
      outbaseCustomer: "",
    };
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          this.getData();
        }
      },
      immediate: true,
    },
  },
  methods: {
    save() {
      editMaterialOut({
        id: this.id,
        outbaseUser: this.outbaseUser,
        outbaseCustomer: this.outbaseCustomer,
      })
        .then((res) => {
          notificationTip("success", "编辑成功!");
          this.$parent.getListData();
          setTimeout(() => {
            this.goBack();
          }, 500);
        })
        .catch((_) => {
          this.form = {};
        });
    },
    goBack() {
      this.$emit("update:visible", false);
    },
    getData() {
      getMaterialOutDetail({
        id: this.id,
      })
        .then((res) => {
          let {
            data: { result },
          } = res;
          this.form = result;
          this.outbaseUser = result?.outbaseUser ?? null;
          this.outbaseCustomer = result?.outbaseCustomer ?? null;
        })
        .catch((_) => {
          this.form = {};
          this.outbaseUser = null;
          this.outbaseCustomer = null;
        });
    },
    //附件预览
    viewFile(file) {
      let { id } = file;
      commonViewFile("beam", id);
    },
    // 下载附件
    downLoadFile(file) {
      let { fileName, imagePath } = file;
      window.open(imagePath + "&filename=" + fileName, "_blank");
    },
    //文件大小转换
    sizeTostr(size) {
      var data = "";
      data = (size / 1024).toFixed(2) + "kb";
      var sizestr = data + "";
      var len = sizestr.indexOf("\.");
      var dec = sizestr.substr(len + 1, 2);
      if (dec == "00") {
        //当小数点后为00时 去掉小数部分
        return sizestr.substring(0, len) + sizestr.substr(len + 3, 2);
      }
      return sizestr;
    },
  },
};
</script>
<style lang="less" scoped>
.detail-material-in-bound-page {
  box-sizing: border-box;
  height: 100%;
  padding: 10px;
  .flex();
  flex-direction: column;
  .zhgd-data-report-header {
    &::before {
      content: attr(header);
      height: 18px;
      border-left: 3px solid var(--primary-color);
      padding-left: 10px;
      font-size: 18px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      color: #525a5d;
      line-height: 18px;
    }
  }
  .detail-material-in-bound-container {
    flex: 1;
    background: #fff;
    .custom-scrollbar();
    //折叠面板
    /deep/.ant-collapse {
      background-color: #ffffff;
      border: 0;
      border-radius: 0;
      border-top: 2px solid #f3f4f6;
      .ant-collapse-content {
        border-top: 0;
        border-radius: 0;
        background-color: #ffffff;
      }
      .ant-collapse-header {
        border-radius: 0;
      }
      .ant-collapse-item {
        border: 0;
        border-bottom: 2px solid #f3f4f6;
      }
      .ant-collapse-item:last-child {
        border-radius: 0 !important;
      }
      .ant-collapse-content-box {
        padding: 0;
        .base-content {
          padding: 0 130px 20px 0;
        }
        .contract-content {
          padding-bottom: 55px;
          .ant-table-fixed {
            border: 1px solid #dcdee2;
            border-bottom: 0;
          }
        }
      }
    }

    .form-item {
      .flex();
      align-items: center;
      margin-bottom: 16px;
      .label {
        width: 100px;
        color: #999;
        text-align: right;
      }
      .value {
        flex: 1;
        background: #f3f4f6;
        border-radius: 2px;
        color: #333;
        padding: 6px 10px;
        min-height: 32px;
      }
      .input-value {
        flex: 1;
      }
      .unit {
        width: 15px;
        margin-left: 9px;
      }
    }
    /deep/.ant-form-item {
      display: flex;
      .ant-form-item-label {
        width: 80px;
        white-space: pre-wrap;
        display: flex;
        justify-content: flex-end;
        line-height: 20px;
        align-items: center;
        height: 36px;
        label {
          color: #999999;
        }
      }
      .check-item-select {
        height: 126px;
        .ant-select-selection__rendered {
          height: 126px;
          .ant-select-selection__placeholder {
            margin-top: -40px !important;
          }
        }
      }

      .ant-form-item-control-wrapper {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
    .material-content {
      padding: 0 100px 0 50px;
      .form-file {
        align-items: unset;
        .label {
          padding-top: 6px;
        }
        .no-data {
          flex: 1;
          background: #f3f4f6;
          border-radius: 2px;
          padding-left: 10px;
          line-height: 32px;
        }
      }
      .form-pic {
        margin-bottom: 4px;
        .no-data-pic {
          margin-bottom: 12px;
        }
        .pic-list {
          .flex();
          flex-wrap: wrap;
          .pic-item {
            width: 168px;
            height: 162px;
            border-radius: 2px;
            overflow: hidden;
            margin-right: 12px;
            margin-bottom: 12px;
            > img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }
      }
      //附件上传样式
      .file-name-type {
        width: 476px;
        line-height: 0;
        border: 1px solid #dcdee2;
        border-radius: 4px;
        padding: 8px;
        padding-top: 0;
        margin-top: 5px;
        height: 135px;
        .custom-scrollbar();
        overflow-x: hidden !important;
        .file-name {
          height: 100%;
          width: 100%;
          flex: 1;
          overflow: hidden;
          display: flex;
          .file-name-text {
            flex: 1;
            width: 100%;
            line-height: 14px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }
        }

        .file-list {
          width: 100%;
          .flex();
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          color: #525a5d;
          height: 22px;
          padding: 3px 3px;
          border-radius: 2px;
        }
        .size-color {
          color: #999999;
        }
        .file-list:hover {
          .size-color {
            color: var(--primary-color) !important;
          }
          color: var(--primary-color) !important;
          background-color: var(--border-color-base);
        }

        .file-download-list {
          width: 100%;
          .flex();
          justify-content: space-between;
          align-items: center;
          margin-top: 10px;
          color: #525a5d;
          height: 22px;
          padding: 3px 3px;
          border-radius: 2px;
        }

        .file-download-list:hover {
          cursor: pointer;
          .size-color {
            color: var(--primary-color);
          }
          color: var(--primary-color);
          .file-name-text {
            text-decoration: underline;
          }
        }

        .check-icon {
          color: #4bc964;
          margin-left: 8px;
        }
        .close-icon {
          cursor: pointer;
          margin-left: 8px;
          color: #ff3f4a;
        }
        .download-icon {
          cursor: pointer;
          color: var(--primary-color);
          margin-left: 8px;
        }
      }
    }
    .edit-footer {
      padding: 18px 0;
      text-align: center;
      button {
        &:last-child {
          margin-left: 20px;
        }
      }
    }
  }
}
</style>
